<template>
  <view class="register-container">
    <view class="register-form">
      <view class="form-title">用户注册</view>
      
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          v-model="form.username" 
          placeholder="请输入用户名" 
          class="input"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          v-model="form.password" 
          placeholder="请输入密码" 
          type="password"
          class="input"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">确认密码</text>
        <input 
          v-model="form.confirmPassword" 
          placeholder="请再次输入密码" 
          type="password"
          class="input"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">昵称</text>
        <input 
          v-model="form.nickname" 
          placeholder="请输入昵称" 
          class="input"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">邮箱</text>
        <input 
          v-model="form.email" 
          placeholder="请输入邮箱" 
          type="email"
          class="input"
        />
      </view>
      
      <button 
        class="register-btn" 
        :disabled="isRegistering"
        @click="handleRegister"
      >
        {{ isRegistering ? '注册中...' : '立即注册' }}
      </button>
      
      <view class="login-link">
        已有账号？<text @click="goToLogin">去登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isRegistering: false,
      form: {
        username: '',
        password: '',
        confirmPassword: '',
        nickname: '',
        email: ''
      }
    }
  },
  methods: {
    async handleRegister() {
      // 表单验证
      if (!this.form.username || !this.form.password) {
        uni.showToast({
          title: '用户名和密码不能为空',
          icon: 'none'
        })
        return
      }
      
      if (this.form.password !== this.form.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }
      
      this.isRegistering = true
      
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://localhost:3000/api/user/register',
            method: 'POST',
            data: {
              username: this.form.username,
              password: this.form.password,
              nickname: this.form.nickname,
              email: this.form.email
            },
            success: resolve,
            fail: reject
          })
        })
        
        if (res.statusCode === 200) {
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          
          // 返回上一页(登录页)
          uni.navigateBack()
        } else {
          uni.showToast({
            title: res.data.message || '注册失败',
            icon: 'none'
          })
        }
      } catch (err) {
        console.error('注册失败:', err)
        uni.showToast({
          title: '注册失败，请稍后重试',
          icon: 'none'
        })
      } finally {
        this.isRegistering = false
      }
    },
    
    goToLogin() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.register-container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.register-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.register-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #7bbcb2;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}

.register-btn[disabled] {
  opacity: 0.6;
}

.login-link {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  margin-top: 30rpx;
}

.login-link text {
  color: #7bbcb2;
}
</style>